<template>
<div class="signin-container">
    <img src="https://image.flaticon.com/icons/svg/145/145859.svg" class="avatar">
    <h3>Welcome {{user.name}}</h3>
    <input type="text" v-model="user.name">
    <input type="password" v-model="user.password">
    <button @click="signIn">Sign in</button>
</div>
</template>
<style scoped>
.signin-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.avatar {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    border: solid 1px rgba(0, 0, 0, 0.137);
}
</style>
<script lang="ts">
import {Vue, Prop, Component} from "vue-property-decorator"
import { store } from '../store'
import { router } from '../router'
@Component
export default class SignIn extends Vue {
    private get user(){
        return store.state.user
    }
    private signIn(){
        router.back()
    }
}
</script>
